<template >
  <div style="background:#ffffff;border:0">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">请假审批</h1>
      <div class="mint-header-button is-right" />
    </header>

    <!-- <div style="height:40px" /> -->
    <mt-field label="*请假类型：">
      <span style="color:#000;display:inline-block;text-align:right" @click="popupVisible22=true">{{ chouseval }}</span>
    </mt-field>
    <div v-for="(item, index) in timearr" :key="index">
      <!-- <mt-field
        v-model="item.starttime"
        label="*开始时间："
      type="date" />-->
      <picker2 :pictitle="'请选择开始时间'" :gettime.sync="item.starttime" />
      <mt-radio v-model="item.startinterval" :options="options" title="时段" />
      <!-- <mt-field
        v-model="item.endtime"
        label="*结束时间："
      type="date" />-->
      <picker2 :pictitle="'请选择结束时间'" :gettime.sync="item.endtime" />
      <mt-radio v-model="item.endinterval" :options="options" title="时段" />
      <p style="line-height:40px;height:40px;margin-left:8px;">时长（天）：{{ gettimelen(item.starttime,item.startinterval,item.endtime,item.endinterval) }}</p>
      <mt-button plain size="small" type="primary" style="display:block;width:94%;margin:0 auto" @click="deletelen(index)">删 除</mt-button>
    </div>
    <mt-button size="small" type="primary" style="display:block;width:94%;margin:20px auto" @click="addtimelen">添加时长</mt-button>
    <mt-field v-model="leaveData.leavedetail" label="*请假原因：" placeholder="输入请假原因" />
    <div style="margin:0 10px;border-top:1px solid #ddd;padding-top:10px">
      <span style="display:block;height:30px">上传附件：</span>
      <div style="width:100%;display:flex;flex-wrap:wrap;">
        <div v-for="(item, index) in filearr1" :key="index" style="width:20%;padding:0 5px;">
          <uploadpic :imagefile.sync="filearr1[index]" />
        </div>
      </div>
    </div>
    <chouseperson :atypeid="'0103'" :num="num" @getspl="getspl" />
    <div class="btn_f">
      <mt-button type="default" style="width:100px;margin-right:15px" @click="goback">取消</mt-button>
      <mt-button type="primary" style="width:100px" @click="submitleave">确定</mt-button>
    </div>
    <mt-popup v-model="popupVisible22" position="bottom" class="mint-popup" style="width:100%;text-align:center">
      <mt-picker ref="picker" :slots="dataList" :visible-item-count="5" :show-toolbar="true" value-key="id2" flex="2">
        <mt-button class="sure" style="display:block;position: absolute;right: 0px;" @click="handleConfirm2">确认</mt-button>
      </mt-picker>
    </mt-popup>
  </div>
</template>
<script>
import uploadpic from '~/components/uploadpic.vue'
import picker2 from '~/components/picker2.vue'
import chouseperson from '~/components/chouseperson.vue'
export default {
  components: {
    uploadpic,
    chouseperson,
    picker2
  },
  data () {
    return {
      ts: this.newStore(),
      popupVisible22: false,
      handlers: function (e) {
        e.preventDefault()
      },
      date1: '',
      date2: '',
      aid: '',
      filearr1: [{}, {}, {}, {}, {}],
      leaveData: {
        starttime: [],
        endtime: [],
        startinterval: [],
        endinterval: [],
        leavenum: '',
        leavedetailnum: [],
        leavedetail: ''
      },
      num: 0,
      htitle: '请假审批',
      options: [
        {
          value: '1',
          label: '上午'
        },
        {
          value: '2',
          label: '下午'
        }
      ],
      olddataList: [],
      chousevalid: '',
      chouseval: '请选择',
      filename: {
        name: '点我上传'
      },
      timearr: [
        {
          starttime: '',
          startinterval: '',
          endtime: '',
          endinterval: '',
          timelen: ''
        }
      ],
      dataList: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'right'
        }
      ]
    }
  },
  watch: {
    timearr: {
      handler (newValue) {
        this.num = 0
        for (let i = 0; i < newValue.length; i += 1) {
          newValue[i].timelen = this.gettimelen(
            newValue[i].starttime,
            newValue[i].startinterval,
            newValue[i].endtime,
            newValue[i].endinterval
          )
          this.num += Number(newValue[i].timelen)
        }
      },
      deep: true
    }
  },
  created () {
    this.getcodeData()
  },
  methods: {
    goback () {
      this.$router.push({ name: 'approval2', query: { name: '申请' } })
    },
    checksplnum (money2, splid) {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EF3277431D02D636A5015C1425899A1F59A41CF7A197311E4A',
        flowid: splid,
        number: money2
      }
      const p = this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.data.operation1[0].hash.cou == '0') {
          this.flag = false
        } else {
          this.flag = true
        }
      })
      return p
    },
    gettimelen (a, a1, b, b1) {
      if (a == '' || a1 == '' || b == '' || b1 == '') {
        return ''
      }
      const datedif = this.datedifference(a, b)
      const timedif = (b1 - a1) / 2 + 0.5
      return datedif + timedif
    },
    option () {
      this.$router.push({
        name: 'approval2',
        query: {
          name: ''
        }
      })
    },
    datedifference (sDate1, sDate2) {
      // sDate1和sDate2是2006-12-18格式
      let dateSpan
      let iDays
      sDate1 = Date.parse(sDate1)
      sDate2 = Date.parse(sDate2)
      dateSpan = sDate2 - sDate1
      dateSpan = Math.abs(dateSpan)
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000))
      return iDays
    },
    submitleave () {
      if (this.chouseval == '请选择' || this.chouseval == undefined) {
        this.$messagebox('提示', '请输入请假类型')
        return
      }
      for (let i = 0; i < this.timearr.length; i += 1) {
        if (
          this.timearr[i].starttime == '' ||
          this.timearr[i].starttime == undefined
        ) {
          this.$messagebox('提示', '请选择开始时间')
          return
        }
        if (
          this.timearr[i].startinterval == '' ||
          this.timearr[i].startinterval == undefined
        ) {
          this.$messagebox('提示', '请选择开始时间段')
          return
        }
        if (
          this.timearr[i].endtime == '' ||
          this.timearr[i].endtime == undefined
        ) {
          this.$messagebox('提示', '请选择结束时间')
          return
        }
        if (
          this.timearr[i].endinterval == '' ||
          this.timearr[i].endinterval == undefined
        ) {
          this.$messagebox('提示', '请选择结束时间端')
          return
        }
      }
      if (
        this.leaveData.leavedetail == '' ||
        this.leaveData.leavedetail == undefined
      ) {
        this.$messagebox('提示', '请输入请假原因')
        return
      }
      if (this.aid == '' || this.aid == undefined) {
        this.$messagebox('提示', '请选择审批流')
        return
      }
      console.log(this.filearr1, 'filearr1')
      this.leaveData.leavenum = ''
      for (let i = 0; i < this.timearr.length; i += 1) {
        this.leaveData.starttime.push(this.timearr[i].starttime)
        this.leaveData.endtime.push(this.timearr[i].endtime)
        this.leaveData.startinterval.push(this.timearr[i].startinterval)
        this.leaveData.endinterval.push(this.timearr[i].endinterval)
        this.leaveData.leavenum =
          Number(this.leaveData.leavenum) + Number(this.timearr[i].timelen)
        this.leaveData.leavedetailnum.push(this.timearr[i].timelen)
      }
      this.$messagebox.confirm('确认提交请假审批').then(action => {
        if (action == 'confirm') {
          const req = {
            handle:
              '9000B8B8D347526960C5BAB1FB6894EF8B7B312373E9BEF47A8517CE4098C19A',
            atype: '0103',
            flowid: this.aid
          }
          this.spost(this.ts, '/mainservlet', req).then(ts => {
            const req2 = this.leaveData
            req2.aid = ts.d.data.operation3[0].hash.approvalid
            req2.handle = 'BD6A960AF46EE09F9C5B42D1658B3CCC60D703BEA30ADC1C'
            req2.fileurl = this.posturl(this.filearr1)
            req2.filename = this.postname(this.filearr1)

            // req2.fileurl = this.filename.url.split(',')
            // req2.filename = this.filename.name.split(',')

            console.log(req2)
            this.spost(this.ts, '/mainservlet', req2).then(() => {
              this.$messagebox('提示', '请假申请提交成功')
              this.$router.push({ name: 'jbrhome', query: { name: '' } })
            })
          })
        }
      })
    },
    posturl (arr) {
      const a = []
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url)
      }
      return a
    },
    // 公共方法图片数组转名称数组
    postname (arr) {
      const b = []
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name)
      }
      return b
    },
    addtimelen () {
      var obj = {
        starttime: '',
        startinterval: '',
        endtime: '',
        endinterval: ''
      }
      this.timearr.push(obj)
    },
    deletelen (index) {
      this.timearr.splice(index, 1)
    },
    getcodeData () {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0502',
        codetype: '05'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.olddataList = ts.d.data.operation1
        this.dataList[0].values = []

        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          const a = {}
          a.value = ts.d.data.operation1[index].hash.code_name
          a.id = ts.d.data.operation1[index].hash.code_name
          a.id2 = ts.d.data.operation1[index].hash.code_id
          this.dataList[0].values.push(a.id)
        }
      })
    },
    handleConfirm2 () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handlers, { passive: false })
      this.chouseval = this.$refs.picker.getValues()[0]
      for (let i = 0; i < this.olddataList.length; i += 1) {
        if (this.chouseval == this.olddataList[i].hash.code_name) {
          this.leaveData.ltype = this.olddataList[i].hash.code_id
        }
      }
      this.popupVisible22 = false
    },
    getspl (val) {
      this.aid = val.id
    }
  }
}
</script>
<style scoped>
.picker-item {
  text-align: center;
}
.btn_f {
  margin: 10px;
  text-align: center;
}
.mint-radiolist-title {
  font-size: 16px;
  color: #333;
}
.mint-radiolist-title {
  width: 50px;
  display: inline-block;
}
.mint-cell mint-field {
  line-height: 48px;
}
.mint-radiolist {
  display: flex;
  flex: 1;
  border-top: 1px solid #ddd !important;
}
.mint-cell-wrapper {
  border: 0px solid !important;
}
.mint-radiolist-title {
  line-height: 34px;
  background: #fff;
}
.picker-center-highlight {
  position: absolute;
  top: 50% !important;
}
.picker-item {
  position: relative;
  top: 35px !important;
}
</style>
